<template>
	<view class="page">
		<view class="title">
			5.14.StorageSync数据缓存API
		</view>
		<view class="p">
			官网链接API
			<uni-link href="https://uniapp.dcloud.net.cn/api/storage/storage.html" text="数据缓存"
				color="#007BFF"></uni-link>
		</view>
		<view class="p">
			将数据存储在本地缓存中指定的 key 中，注意看代码中的用法，查看缓存在谷歌浏览器F12开发者工具里面的APPlication里面 Local storage
		</view>
		<view class="p">
			一下是一个搜索的Demo
		</view>
		<view class="p box">
			<!-- 搜索框 -->
			<uni-search-bar @confirm="onSearch" v-model="searchValue" placeholder="请输入搜索关键词"></uni-search-bar>
			<!-- 搜索记录列表 -->
			<view class="search-history">
				<view class="history-title">搜索记录（点击其中的某个记录可以删除）</view>
				<view class="history-item" v-for="(keyword, index) in searchHistory" :key="index"
					@click="reSearch(keyword)">
					{{ keyword }}
				</view>
			</view>
		</view>
		<view class="flex center">
			<button type="warn" @click="clearn">移除所有缓存</button>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue'


	// 搜索框绑定的值
	const searchValue = ref('');
	// 搜索历史记录
	const searchHistory = ref([]);

	// 页面加载时获取历史搜索记录
	onMounted(() => {
		const history = uni.getStorageSync('searchHistory');
		if (history) {
			searchHistory.value = history;
		}
	});

	// 搜索处理函数
	const onSearch = () => {
		const keyword = searchValue.value.trim();
		if (keyword) {
			// 检查关键词是否已存在于历史记录中
			if (!searchHistory.value.includes(keyword)) {
				// 将关键词添加到历史记录中
				searchHistory.value.unshift(keyword);
				// 保存历史记录到 Storage
				uni.setStorageSync('searchHistory', searchHistory.value);
			}
			// 清空搜索框
			searchValue.value = '';
			// 这里可以添加实际的搜索逻辑，例如调用接口进行搜索
			console.log(`搜索关键词: ${keyword}`);
		}
	};

	// 点击历史记录重新搜索
	const reSearch = (keyword) => {
		// 获取当前的搜索历史记录
		let history = uni.getStorageSync('searchHistory');
		// 过滤掉要删除的关键词
		history = history.filter(item => item !== keyword);
		// 更新响应式变量
		searchHistory.value = history;
		// 更新本地存储
		uni.setStorageSync('searchHistory', history);
	};

	//清楚所有内容
	const clearn = () => {
		uni.clearStorageSync();
		searchHistory.value = []
	}
</script>

<style lang="scss" scoped>
	.search-history {
		.history-item {
			display: inline-block;
			background: #eee;
			border-radius: 4rpx;
			padding: 8rpx 16rpx;
			margin-right: 24rpx;
			margin-bottom: 12rpx;
		}
	}
</style>